<template>
  <div>
    <div>
      <van-image :src="bgApply1" width="100%" />
    </div>
    <!-- <van-row
        style="position:absolute;text-align:center;width:100%;font-size:10px;bottom:0px;"
    >基本信息登记</van-row>-->
    <div
      :style="backgroundDiv"
      style="
        margin-top: -1px;
        padding-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
      "
      v-if="true"
    >
      <van-field
        v-model="username"
        clearable
        @click="hideTabbar"
        @input="nameInput"
        label="姓名:"
        size="15px"
        :border="false"
      >
      </van-field>
      <van-field
        v-model="phone"
        type="tel"
        clearable
        @click="hideTabbar"
        @input="phoneInput"
        label="电话:"
        size="15px"
        :border="false"
      >
      </van-field>
      <van-field
        v-model="address"
        clearable
        @click="hideTabbar"
        label="地址:"
        size="15px"
        :border="false"
      />
      <van-field
        size="15px"
        :border="false"
        @click="hideTabbar"
        v-model="message"
        rows="2"
        autosize
        label="留言:"
        type="textarea"
        show-word-limit
      />
      <div class="submit">
        <div @click="submit">
          <span style="color: red; font-weight: bold; font-size: 16px"
            >点击提交 等待回复</span
          >
        </div>
      </div>
      <div
        @click="callTel('17314248188')"
        style="width: 80%; padding-top: 20px"
        v-show="false"
      >
        <span class="span_phone">加盟热线:</span>
        <span style="color: white; font-weight: bold"
          >&#160; 173-1424-8188</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import { Row, Col, Field, Image, Toast } from 'vant';
import { saveApply, gethomebuton, authInfo } from '@/api/api';
// import bgApply from '@/assets/images/bgApply.jpg';
import { getLocalStorage } from '@/utils/local-storage';
export default {
  name: 'apply',
  data() {
    return {
      backgroundDiv: {
        backgroundImage:
          'url(' + require('@/assets/images/apply_bottom.jpg') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
      },
      username: '',
      phone: '',
      address: '',
      message: '',
      nameError: '',
      phoneError: '',
      //bgApply1: "https://xintu361.oss-cn-qingdao.aliyuncs.com/8ok9bw6im7rwvnoq7x5c.jpg",
      bgApply1: '',
      // 默认屏幕高度
      docmHeight: document.documentElement.clientHeight, //一开始的屏幕高度
      showHeight: document.documentElement.clientHeight, //一开始的屏幕高度
    };
  },
  watch: {
    showHeight: 'inputType',
  },
  mounted() {
    // window.onresize监听页面高度的变化
    window.onresize = () => {
      return (() => {
        window.screenHeight = document.body.clientHeight;
        this.showHeight = window.screenHeight;
      })();
    };
  },
  created() {
    document.title = '合作加盟';
    gethomebuton({
      userId: Number(getLocalStorage('userId').userId),
      mode: 8,
    }).then((res) => {
      let list = res.data.data;
      list.forEach((element) => {
        this.bgApply1 = element.image;
      });
    });
  },

  methods: {
    // 检测屏幕高度变化  控制底部导航显隐
    inputType() {
      if (!this.timer) {
        this.timer = true;
        let that = this;
        setTimeout(() => {
          if (that.docmHeight <= that.showHeight) {
            this.$store.dispatch('showTab');
          } else {
            this.$store.dispatch('hideTab');
          }
          that.timer = false;
        }, 20);
      }
    },
    callTel(tel) {
      window.location.href = 'tel:' + tel;
    },
    nameInput() {
      this.nameError = '';
    },
    phoneInput() {
      this.phoneError = '';
    },
    //点击隐藏底部导航   解决键盘弹出后隐藏闪现问题
    hideTabbar() {
      // this.$store.dispatch('hideTab');
    },
    submit() {
      if (this.username == '') {
        Toast('请填写名称！');
        return;
      }
      if (this.phone == '' || this.phone.length != 11) {
        Toast('手机号格式错误！');
        return;
      }

      authInfo().then((res) => {
        this.userId = res.data.data.userId;
        this.mobile = res.data.data.mobile;
        let status = res.data.data.status;
        this.userLevel = res.data.data.userLevel;
        if (status == 0) {
          //未认证
          Toast('请先验证手机号!');
          this.$router.push(`/check`);
          return;
        } else {
          saveApply({
            name: this.username,
            tel: this.phone,
            address: this.address,
            introduce: this.message,
          })
            .then((res) => {
              Toast('申请信息已提交成功，请耐心等待回复');
              this.$router.push(`/`);
              // this.$dialog.alert({ message: '感谢您的反馈' });
            })
            .catch((err) => {
              this.$dialog.alert({ message: err.data.errmsg });
            });
        }
      });
    },
  },

  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Field.name]: Field,
    [Image.name]: Image,
  },
};
</script>

<style lang="scss" scoped>
/deep/ .van-field__label {
  width: auto;
  font-weight: bold;
  margin-right: 10px;
}

/deep/ .van-field__control {
  color: white;
}

.van-cell-group {
  background-color: transparent;
}

.van-cell {
  background-color: transparent;
  color: white;
  width: 80%;
  border: 1px solid white;
  margin-top: 10px;
  border-radius: 10px;
}

.van-image {
  display: block;
}

.submit {
  background: #fff;
  border-radius: 10px;
  width: 80%;
  height: 42px;
  color: #fff;
  text-align: center;
  line-height: 42px;
  margin-top: 20px;
}

.span_phone {
  height: 24px;
  line-height: 24px;
  font-weight: bold;
  display: -moz-inline-box;
  display: inline-block;
  color: white;
  font-size: 15px;
}
/deep/ .van-field__label {
  color: white !important;
}
</style>
